
<div class="form-group" id="ProductForm">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label color-green">商品规格</label>

    <div class='col-sm-10 think-checkbox'>
        <select class="layui-select full-width block" name="spec_id" lay-ignore>
            {foreach $specs as $spec}
            {php}$param=str_replace('"',"'",$spec['param']);{/php}
            <!--{eq name='spec.id' value='$spec_id|default=0'}-->
            <option data-param="{$param}" selected="selected" value="{$spec.id}">{$spec.title}</option>
            <!--{else}-->
            <option data-param="{$param}" value="{$spec.id}">{$spec.title}</option>
            <!--{/eq}-->
            {/foreach}
        </select>
        <table class="layui-table notevent" lay-size="sm" ng-if="specs.length>0">
            <tr>
                <th>可选规格</th>
                <th>规格内容</th>
            </tr>
            <tr ng-repeat="x in specs">
                <td ng-bind="x.name"></td>
                <td>
                    <label ng-repeat="m in x.param" class="nowrap margin-right-10 line-height-18">
                        <input data-spec="{{x.name}}_{{m.value}}" ng-model="m.checked" class="inline-block" type="checkbox" lay-ignore>
                        <span ng-bind="m.value"></span>
                    </label>
                </td>
            </tr>
        </table>
        <table class="layui-table notevent" lay-size="sm">
            <thead>
            <tr>
                <th width="5%">标识</th>
                <th width="10%">商品规格</th>
                <th width="10%">规格标题</th>
                <th width="10%">市场价</th>
                <th width="10%">销售价</th>
                <th width="10%">秒杀价</th>
                <th width="10%">拼团价</th>
                <th width="10%">总库存</th>
                <th width="10%">已售</th>
                <th width="10%">规格图片</th>
                <!--<th width="10%">规格状态</th>-->
            </tr>
            </thead>
            <tbody>
            <tr ng-class="x.is_status?'':'layui-bg-gray'" ng-repeat="x in specdata">
                <td class="num-input-td">
                    <input class="layui-input" placeholder="" readonly name="spec[id][]" value="{{x.id}}">
                </td>
                <td class="nowrap">
                    <input type="hidden" name="spec[spec_name][]" value="{{x.spec_name}}">
                    <span ng-repeat="a in x.spec_attrs">
                                        <span class="layui-badge layui-bg-blue" ng-bind="a.name"></span>
                                        <span ng-if="b" class="layui-badge layui-bg-green" ng-repeat="b in a.value" ng-bind="b"></span>
                                    </span>
                </td>
                <td class="num-input-td">
                    <input class="layui-input" placeholder="" type="text" name="spec[spec_title][]" value="{{x.spec_title}}">
                </td>
                <td class="price-input-td">
                    <input onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input " placeholder="0.00" name="spec[price_market][]" value="{{x.item_old_price}}">
                </td>
                <td class="price-input-td">
                    <input onblur="this.value=(parseFloat(this.value)||0).toFixed(2)" class="layui-input" placeholder="0.00" name="spec[price][]" value="{{x.item_price}}">
                </td>
                <td class="price-input-td">
                    <input onblur="this.value=(parseFloat(this.value)||1).toFixed(2)" class="layui-input " placeholder="0.00" name="spec[seckill_price][]" value="{{x.seckill_price}}">
                </td>
                <td class="price-input-td">
                    <input onblur="this.value=(parseFloat(this.value)||1).toFixed(2)" class="layui-input" placeholder="0.00" name="spec[spell_price][]" value="{{x.spell_price}}">
                </td>
                <td class="num-input-td">
                    {{x.item_stock?x.item_stock:0}}
                </td>
                <td class="num-input-td">
                    {{x.item_sale?x.item_sale:0}}
                </td>
                <td class="num-input-td">
                    <input type="hidden" data-width="276" data-height="276" class="goods_spec_img" name="spec[thumb][]" data-url="{{x.goods_spec_img}}" value="{{x.goods_spec_img}}">
                </td>
                <!--<td>-->
                    <!--<label class="nowrap line-height-18">-->
                        <!--<input type="hidden" name="spec[status][]" value="{{x.is_status?1:0}}">-->
                        <!--<input ng-checked="x.is_status" ng-model="x.is_status" value="1" lay-ignore class="inline-block " type="checkbox"/> 启用-->
                    <!--</label>-->
                <!--</td>-->
            </tr>
            </tbody>
        </table>
    </div>
    </div>
</div>
<script>
    $.fn.uploadFiless = function (callback) {

        var that = this, mode = $(this).attr('data-files') || 'one';
        this.attr('data-inited', true).attr('data-multiple', (mode !== 'btn' && mode !== 'one') ? 1 : 0);

        require(['/vendor/build-view/plugs/plupload/build.js'], function (apply) {
            apply(that, null, function(filename,url,field){

                var input = $(that).prev('input');
                input.attr('data-url',url);
                input.val(url).trigger('change');
                if (input.attr('data-url')) input.next().css('backgroundImage', 'url(' + input.attr('data-url') + ')');
            });
        })
    };
    require(['jquery', 'angular'], function () {
        var app = angular.module("ProductForm", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);
        // 应用事件处理
        function callback($rootScope) {
            $('.form-group .goods_spec_img').uploadOneImages();
            // 绑定规格列表
            $rootScope.specs = [];
            // 规格默认数据
            var specdata = JSON.parse('{$value|default=[]|json_encode=###,256|raw}');
            // 规格显示切换
            $('#ProductForm').on('click', '[data-spec]', applySpecData);
            // 商品规格切换
            $('#ProductForm').on('change', '[name="spec_id"]', function () {
                var specs = eval(this.options[this.selectedIndex].getAttribute('data-param'));
                for (var i in specs) {
                    specs[i].param = [];
                    var values = specs[i].value.split(' ');
                    for (var j in values) {
                        specs[i].param.push({
                            name: specs[i].name, value: values[j],
                            checked: getSpecStatus(specs[i].name, values[j])
                        });
                    }
                }
                $rootScope.$apply(function () {
                    $rootScope.specs = specs;
                    setTimeout(applySpecData, 10);
                });
            }).find('[name="spec_id"]').trigger('change');

            // 规格属性切换
            function applySpecData() {
                var params = {};
                for (var i in $rootScope.specs) {
                    var isChecked = false;
                    for (var j in $rootScope.specs[i].param) {
                        if ($rootScope.specs[i].param[j].checked) {
                            isChecked = true;
                            var name = $rootScope.specs[i].param[j].name;
                            var value = $rootScope.specs[i].param[j].value;
                            (params[name] || (params[name] = [])).push({name: name, value: value});
                        }
                    }
                    if (!isChecked) {
                        $rootScope.specs[i].param[0].checked = true;
                        var name = $rootScope.specs[i].param[0].name;
                        var value = $rootScope.specs[i].param[0].value;
                        (params[name] || (params[name] = [])).push({name: name, value: value});
                    }
                }
                $rootScope.$apply(function () {
                    $rootScope.specdata = DataArray.render(params);
                });
                $('.form-group .goods_spec_img').each(function (key,item) {
                    if($(item).val() == '/static/theme/img/image.png'){
                        $(item).val('');
                    }
                });
                $('.form-group .goods_spec_img').nextAll().each(function (key,item) {
                    $(item).uploadFiless();
                });
            }

            // 获取规格选择状态
            function getSpecStatus(name, spec) {
                for (var i in specdata) {
                    var arr = specdata[i].spec_name.split(',');
                    for(var j in arr){
                        if(arr[j] == (name + ':' + spec)){
                            return true;
                        }
                    }

                }
                return false;
            }

            // 数据处理
            var DataArray = new function () {
                // 编译生成规格数据
                this.render = function (data) {
                    var specs = [], list = [];
                    for (var i in data) {
                        specs = this.joinArray(data[i], specs, i);
                    }
                    (specs.length < 1) && (specs = ['default:default']);
                    for (var i in specs) {
                        var specName = specs[i];
                        var specTitle = (specName === 'default:default') ? '默认规格' : specName.replace(/,/ig, ';').replace(/:/ig, ':');
                        var specAttrs = [], lines = specTitle.split(';');
                        for (var j in lines) {
                            var line = lines[j].split(':');
                            specAttrs.push({name: line[0], value: (line[1] || '').split(',')});
                        }
                        list.push({
                            spec_name: specName, spec_title: specTitle, spec_attrs: specAttrs,
                            item_price: parseFloat(this.getData(specs[i], 'price') || '0').toFixed(2),
                            item_old_price: parseFloat(this.getData(specs[i], 'price_market') || '0').toFixed(2),
                            seckill_price: parseFloat(this.getData(specs[i], 'seckill_price') || '0').toFixed(2),
                            spell_price: parseFloat(this.getData(specs[i], 'spell_price') || '0').toFixed(2),
                            item_stock: this.getData(specName, 'stock') || '0',
                            item_sale: this.getData(specName, 'sale') || '0',
                            spec_title: this.getData(specName, 'spec_title') || '',
                            id: this.getData(specName, 'id'),
                            goods_spec_img: this.getData(specName, 'thumb') || '/static/theme/img/image.png',
                            is_status: this.getData(specName, 'status') !== '0'
                        });
                    }

                    return list;
                };
                // 读取规格默认数据
                this.getData = function (spec, field) {
                    for (var i in specdata) {

                        if (specdata[i].spec_name === spec) {
                            return specdata[i][field] || '';
                        }
                    }
                    return '';
                };
                // 数组交叉计算
                this.joinArray = function (item, list, pk) {
                    var _list = [];
                    for (var i in item) {
                        if (list.length > 0) {
                            for (var j in list) {
                                _list.push(list[j] + ',' + pk + ':' + item[i].value);
                            }
                        } else {
                            _list.push(pk + ':' + item[i].value);
                        }
                    }
                    return _list;
                }
            };
        }
        // 过滤规格参数列表
        function filterParamList(list) {
            return list.length < 1 ? [{name: '', value: ''}] : list;
        }
    });
</script>